import {  Checkbox, message } from 'antd';
import React, { useState } from 'react';
import { LoginParamsType, fakeAccountLogin } from '@/services/login';
import LoginForm from './components/Login';

import styles from './style.less';
import Global from '@/global';
import { history } from 'umi';
import { getPageQuery } from '@/utils/utils';
import { setAuthority } from '@/utils/authority';

const { Tab, UserName, Password, Submit } = LoginForm;
interface LoginProps {
}

const Login: React.FC<LoginProps> = (props) => {
  const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState<string>('account');
  const [submitting, setSubmitting] = useState<boolean>(false);

  const handleSubmit = (values: LoginParamsType) => {
    setSubmitting(true);
    fakeAccountLogin(values).then(res => {
      setSubmitting(false);
      if (res.success) {
        if (res.data.token) {
          localStorage.setItem('Authorization', res.data.token);
        }
        Global.setItem('login', true);
        Global.setItem('userinfo', res.data.userInfo);
        Global.setItem('permission', res.data.permissions);
        setAuthority(res.data.permissions);
        
        //跳转
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params as { redirect: string };
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = '/';
            return;
          }
        }
        history.replace(redirect || '/');
      } else {
        message.error(res.msg);
      }
    })
  };

  Global.setItem("login", false);

  return (
    <div className={styles.main}>
      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
        <Tab key="account" tab="账户密码登录">

          <UserName
            name="username"
            placeholder="用户名"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <Password
            name="password"
            placeholder="密码"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </Tab>
        <div>
          <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
            自动登录
          </Checkbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
        <Submit loading={submitting}>登录</Submit>
        {/* <div className={styles.other}>
          <Link className={styles.register} to="/user/register">
            注册账户
          </Link>
        </div> */}
      </LoginForm>
    </div>
  );
};

export default Login;
